import React, { ReactElement, useContext } from 'react';
import { View, Image } from 'react-native';
import Button from '../../../../../../components/Button';
import CustomText from '../../../../../../components/Text';
import { dropDownArrow } from '../../../../../../constant/resource';
import { setIsShowSelectGrade } from '../../actions';

import styles from './style';
import { Store } from '../../reducer';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { currentGrade } = state;
  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <View style={styles.loadInfo}>
          <Button
            style={styles.loadGrade}
            onPress={(): void => {
              setIsShowSelectGrade(true);
            }}
          >
            <CustomText style={styles.grade}>{currentGrade.desc}</CustomText>
            <Image source={dropDownArrow} style={styles.dropDownArrow} />
          </Button>

          {/* <Button style={styles.loadCart} onPress={(): void => {}}>
          <Image source={cart} style={styles.cart} />
          <View style={styles.loadCartNum}>
            <Text style={styles.cartNum}>2</Text>
          </View>
        </Button> */}
        </View>
        <View style={styles.loadTab}>
          <View style={styles.tab}>
            <CustomText style={styles.tabDesc}>精选</CustomText>
            <View style={styles.selected} />
          </View>
        </View>
      </View>
      <View style={styles.space} />
    </View>
  );
};
